import { useState } from 'react';

export default function Home() {
  const [action, setAction] = useState('generate');
  const [licenseKey, setLicenseKey] = useState('');
  const [result, setResult] = useState('');
  const [loading, setLoading] = useState(false);

  const generateLicense = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const data = await response.json();
      if (data.success) {
        setResult(`✅ 生成成功！授权码：${data.license_key}`);
      } else {
        setResult(`❌ 生成失败：${data.message}`);
      }
    } catch (error) {
      setResult(`❌ 请求失败：${error.message}`);
    }
    setLoading(false);
  };

  const checkLicense = async () => {
    if (!licenseKey) {
      setResult('❌ 请输入授权码');
      return;
    }
    
    setLoading(true);
    try {
      const response = await fetch('/api/check', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ license_key: licenseKey }),
      });
      const data = await response.json();
      if (data.success) {
        setResult(`✅ 授权码有效
最大设备数：${data.license_info.max_devices}
已激活设备：${data.license_info.devices_registered}
状态：${data.license_info.is_active ? '有效' : '无效'}`);
      } else {
        setResult(`❌ 查询失败：${data.message}`);
      }
    } catch (error) {
      setResult(`❌ 请求失败：${error.message}`);
    }
    setLoading(false);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>🚀 快捷指令授权管理系统</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => setAction('generate')}
          style={{ marginRight: '10px', padding: '10px 20px', backgroundColor: action === 'generate' ? '#0070f3' : '#ccc' }}
        >
          生成授权码
        </button>
        <button 
          onClick={() => setAction('check')}
          style={{ padding: '10px 20px', backgroundColor: action === 'check' ? '#0070f3' : '#ccc' }}
        >
          查询授权码
        </button>
      </div>

      {action === 'generate' && (
        <div>
          <p>点击按钮生成新的13位授权码：</p>
          <button 
            onClick={generateLicense}
            disabled={loading}
            style={{ padding: '10px 20px', backgroundColor: '#0070f3', color: 'white', border: 'none' }}
          >
            {loading ? '生成中...' : '生成授权码'}
          </button>
        </div>
      )}

      {action === 'check' && (
        <div>
          <p>输入授权码查询状态：</p>
          <input
            type="text"
            value={licenseKey}
            onChange={(e) => setLicenseKey(e.target.value)}
            placeholder="请输入13位授权码"
            style={{ padding: '10px', width: '200px', marginRight: '10px' }}
          />
          <button 
            onClick={checkLicense}
            disabled={loading}
            style={{ padding: '10px 20px', backgroundColor: '#0070f3', color: 'white', border: 'none' }}
          >
            {loading ? '查询中...' : '查询状态'}
          </button>
        </div>
      )}

      {result && (
        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '5px', whiteSpace: 'pre-line' }}>
          {result}
        </div>
      )}
    </div>
  );
}